<template>
  <div class="content">
      <van-nav-bar title="注册" left-arrow @click-left="onClickLeft"/>
      <div class="Reg-box">
        <p>
          <van-field v-model="username" label="用户名" ref="input1" placeholder="请输入用户名"/>
          <van-icon name="success" class="icon-color" v-if="isUserShow" color="#32CD32"/>
        </p>
        <p>
          <van-field v-model="password" label="密码" ref="input2" placeholder="请输入密码" @click.native="isPwdFocus"/>
          <van-icon name="success" class="icon-color" v-if="isPwdShow" color="#32CD32"/>
        </p>
        <p>
          <van-field v-model="tel" label="手机号" ref="input3" placeholder="请输入手机号" @click.native="isTelFocus"/>
          <van-icon name="success" class="icon-color" v-if="isTelShow" color="#32CD32"/>
        </p>
        <p>
          <van-field v-model="sms" center label="短信验证码" placeholder="请输入短信验证码" @click.native="isSmsFocus">
            <van-button slot="button" size="small" type="primary">发送验证码</van-button>
          </van-field>
        </p>
        <p><van-button size="large" type="danger" style="margin-top:30px;" @click.native="reg">注册</van-button></p>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Field } from 'vant';
Vue.use(Field);
export default {
  data() {
    return {
      username: '',
      password: '',
      tel: '',
      sms: '',
      //   验证码验证
      code: 1234,
      isUserShow: false,
      isPwdShow: false,
      isTelShow: false,
    }
  },
  mounted () {
    // 测试账号密码
    var _this=this
    console.log('账号：a123456，密码：123456')
    // 自动获取焦点
    _this.$refs.input1.focus()
  },
  methods:{
    onClickLeft () {
      this.$router.push({path: '/'})
    },
    isPwdFocus () {
      var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
      if (!uPattern.test(this.username)) {
        this.$toast('账号必须为4到16位（字母，数字，下划线，减号）')
        this.$refs.input1.focus()
        this.username = ''
        this.isUserShow = false
      } else {
        this.isUserShow = true
      }
    },
    isTelFocus () {
      var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
      if (!uPattern.test(this.password)) {
        this.$toast('密码必须为4到16位（字母，数字，下划线，减号）')
        this.$refs.input2.focus()
        this.password = ''
        this.isPwdShow = false
      } else {
        this.isPwdShow = true
      }
    },
    isSmsFocus () {
      var uPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
      if (!uPattern.test(this.tel)) {
        this.$toast('手机号格式错误，请重新输入')
        this.$refs.input3.focus()
        this.tel = ''
        this.isTelShow = false
      } else {
        this.isTelShow = true
      } 
    },
    reg () {
      if (this.sms != this.code) {
        this.$toast('验证码不正确')
      } else {
        //   将用户名写进cookie
        document.cookie("name="+this.username)
        this.$toast('注册成功 准备跳转')
      }
    }
  }
}
</script>

<style scoped>
.content{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(245, 245, 245)
}
.Reg-box{
  padding: 50px 0;
}
.Reg-box p{
  position: relative;
}
.icon-color{
  position: absolute;
  right: 10px;
  bottom: 15px;
}
</style>
